<template>
	<view class="buy-page">
		<template v-if="systemInfo.platform !== 'ios' && !systemInfo.system.includes('iOS')">
			<view class="tabbar-box" @tap.stop="">
				<view class="tabbar">
					<view :class="['tabbar-item', page2TabbarAc == index ? 'ac' : '']" v-for="(item, index) in page2TabbarList" :key="index" @click="changePage2TabbarAc(item, index)">
						{{ item.text }}
					</view>
				</view>
				<view class="filter">
					<!-- <uni-data-select v-model="chicunAc" :localdata="chicunRange" @change="changechicun"></uni-data-select> -->
				</view>
			</view>
			<view class="vip-box" v-if="page2TabbarAc == 0">
				<view class="goods">
					<view class="list">
						<view :class="['item', goods1Ac == index ? 'ac' : '']" v-for="(item, index) in goods1" :key="index" @tap="changeGoods1Ac({ item, index })">
							<view class="text">{{ item.text }}</view>
							<view class="price">￥{{ item.price == 0 ? "限时免费" : item.price }}</view>
							<view class="price-old" v-if="item.oldprice">￥{{ item.oldprice }}</view>
							<view :class="['tips', goods1Ac == index ? 'style1' : 'style1']">{{ item.tips }}</view>
							<view class="tips">有效期：{{ index == 0 ? "90天" : "1年" }}</view>
							<view class="tag" v-if="item.isTag">无限克隆</view>
							<view class="tag" v-if="item.isTag2">2个分身</view>
							<view class="tag" v-if="item.isTag3">7个分身</view>

							<!-- <image v-show="goods1Ac == index" class="select" :src="imgPath + 'buy/select.svg'" mode=""></image> -->
						</view>
					</view>
					<view class="buy-box">
						<view class="tips11" @tap="$refs.RedemptionCode.open()">
							<view class="icon">
								<image class="img" :src="imgPath + 'buy/duihuan.svg'" mode=""></image>
							</view>
							<view class="text">兑换码</view>
						</view>
						<view class="buy-btn" @tap="getOrderConfirmApi({ productId: goods1[goods1Ac].id, type: 'vip' })">立即购买</view>
						<view class="f">
							<view class="check" @tap="isCheck = !isCheck">
								<image class="icon" v-if="!isCheck" :src="imgPath + 'buy/check.svg'" mode="widthFix"></image>
								<image class="icon" v-else :src="imgPath + 'buy/check-ac.svg'" mode="widthFix"></image>
							</view>
							<view class="text">已阅读并同意</view>
							<view class="text2" @tap="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/【' + companyName + 'AIGC创作平台】付费服务协议.html')">《{{ companyName }}服务协议》</view>
						</view>
					</view>
				</view>
				<view class="equity">
					<view class="title">VIP专享权益</view>
					<view class="biaoge">
						<view class="item" v-for="(item, index) in equityList" :key="index">
							<image class="pic" :src="item.pic" mode="widthFix"></image>
							<view class="text">{{ item.text }}</view>
							<view class="tips">{{ item.tips }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="gold-box" v-if="page2TabbarAc == 1">
				<view class="t">
					<image class="money" :src="imgPath + 'buy/money.svg'" mode=""></image>
					<view class="text">{{ myPage_sub1_top1.list[0].tips }}</view>
					<view class="num">{{ myPage_sub1_top1.list[0].num }}</view>
				</view>
				<view class="b">
					<view class="title">算力充值</view>
					<view class="tips">算力越多，视频时长越长哟～</view>
					<view class="list">
						<view :class="['item', chongzhi_num_ac == item.id ? 'ac' : '']" v-for="(item, index) in chongzhi_num_list" :key="item.id" @tap="changeChongzhi_num_ac(item, index)">
							<view class="item-t">
								<view class="t-l">{{ item.number }}</view>
								<view class="t-l" style="font-size: 30rpx">{{ "算力" }}</view>
								<!-- <image class="money" :src="imgPath + 'buy/money.svg'" mode=""></image> -->
							</view>
							<view class="item-b">
								<view class="t-l">{{ item.tips }}</view>
								<view class="t-r">￥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="buy-box">
					<view class="tips11" @tap="$refs.RedemptionCode.open()">
						<view class="icon">
							<image class="img" :src="imgPath + 'buy/duihuan.svg'" mode=""></image>
						</view>
						<view class="text">兑换码</view>
					</view>
					<view class="buy-btn" @tap="getOrderConfirmApi({ productId: chongzhi_num_ac })">立即购买</view>
					<view class="f">
						<view class="check" @tap="isCheck = !isCheck">
							<image class="icon" v-if="!isCheck" :src="imgPath + 'buy/check.svg'" mode="widthFix"></image>
							<image class="icon" v-else :src="imgPath + 'buy/check-ac.svg'" mode="widthFix"></image>
						</view>
						<view class="text">已阅读并同意</view>
						<view class="text2" @tap="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/【' + companyName + 'AIGC创作平台】付费服务协议.html')">《{{ companyName }}服务协议》</view>
					</view>
				</view>
			</view>
			<uni-popup ref="RedemptionCode" type="dialog">
				<uni-popup-dialog ref="RedemptionCodeDialog" :focus="false" mode="input" title="输入兑换码" value="" placeholder="请输入兑换码" :showClose="true" @confirm="RedemptionCodeConfirm"></uni-popup-dialog>
			</uni-popup>
		</template>
		<template v-else>
			<view>ios暂不支持购买，请联系管理员！</view>
		</template>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/home.js";
import * as buyApi from "@/api/buy.js";
export default {
	data() {
		return {
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			isCheck: false,
			RedemptionCodeVal: "",
			buyVipDataList1Ac: -1,
			buyVipDataList1: [],
			rightList: [],
			myPage_sub3: {
				duanshipinInfo: {
					youxiaoqi: "2023-12-09",
					dataList1: [
						{
							id: 4,
							icon: "icon1_4",
							title: "短视频时长",
							num: "0",
							unitText: "时间/分钟",
							classList: ["text3"]
						},
						{
							id: 2,
							icon: "icon1_2",
							title: "我的成片",
							num: "0",
							unitText: "数量/个",
							classList: []
						},
						{
							id: 3,
							icon: "icon1_3",
							title: "可用空间",
							num: "0.00",
							unitText: "缓存空间/GB",
							classList: []
						},
						{
							id: 1,
							icon: "icon1_1",
							title: "我的项目",
							num: "0",
							unitText: "数量/个",
							classList: []
						}
					]
				},
				twoDhuiyuanInfo: {
					youxiaoqi: "2023-12-09",
					dataList1: [
						{
							id: 2,
							icon: "icon2_1",
							title: "直播时长",
							num: "0",
							unitText: "时间/分钟",
							classList: ["text3"]
						},
						{
							id: 1,
							icon: "icon2_1",
							title: "我的直播间",
							num: "0",
							unitText: "数量/个",
							classList: []
						}
					]
				},
				b_dataList: [
					{
						id: 1,
						text: "形象定制",
						unit: "次",
						num: "0"
					},
					{
						id: 2,
						text: "声音克隆定制",
						unit: "次",
						num: "0"
					},
					{
						id: 3,
						text: "直播时长",
						unit: "次",
						num: "0"
					},
					{
						id: 4,
						text: "漫画次数",
						unit: "次",
						num: "0"
					},
					{
						id: 5,
						text: "数字人租赁次数",
						unit: "",
						num: "0"
					},
					{
						id: 6,
						text: "视频制作次数",
						unit: "",
						num: "0"
					},
					{
						id: 7,
						text: "视频制作次数",
						unit: "",
						num: "0"
					},
					{
						id: 8,
						text: "视频制作次数",
						unit: "",
						num: "0"
					}
				]
			},
			myPage_sub1_top1: {
				list: [
					{
						id: 1,
						iconBgc: "rgba(247, 237, 252, 1)",
						iconC: "rgba(230, 172, 115, 1)",
						icon: "myPage-sub1-top1",
						text: "金币余额",
						num: 0,
						btnText: "去充值",
						tabAc: 1,
						tabList: [
							{ id: 1, text: "充值明细", icon: "chongzhi" },
							{ id: 2, text: "金币消耗", icon: "xiaohao" }
						],
						pageSizes: [5, 10, 20, 50],
						total: 0,
						currentPage: 1,
						pageSize: 5,
						dataList1: [
							// {
							//     OrderNumber: '订单编号',
							//     RechargeSource: '充值来源',
							//     RechargeType: '充值类型',
							//     ProductName: '商品名称',
							//     RechargeLimit: '充值额度',
							//     PaymentAmount: '付款金额',
							//     ContractAmount: '合同金额',
							//     OrderStatus: '订单状态',
							//     PaymentMethod: '支付方式',
							//     OrderTime: '下单时间',
							// },
						],
						currentPage2: 1,
						pageSize2: 10,
						total2: 0,
						dataList2: [],
						show: true
					},
					{
						id: 2,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top2",
						text: "视频时长余额",
						num: 0,
						btnText: "去充值"
					},
					{
						id: 3,
						iconBgc: "rgba(255, 254, 227, 1)",
						iconC: "rgba(204, 195, 63, 1)",
						icon: "myPage-sub1-top3",
						text: "绘画次数余额",
						num: 0,
						btnText: "联系客服"
					},
					{
						id: 4,
						iconBgc: "rgba(237, 246, 252, 1)",
						iconC: "rgba(21, 153, 209, 1)",
						icon: "myPage-sub1-top4",
						text: "音频时长余额",
						num: 0,
						btnText: "去充值"
					},
					{
						id: 5,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top5",
						text: "短视频合成时长",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 6,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top6",
						text: "直播合成时长",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 7,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top7",
						text: "绘画次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 8,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top8",
						text: "变声次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 9,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top7",
						text: "形象克隆次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 10,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top10",
						text: "声音克隆次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 10,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top11",
						text: "数字名片",
						num: 0,
						btnText: "去充值",
						show: true
					}
				],
				ac: 1
			},
			getVirtualcoinrationData: [],
			page2TabbarAc: 0,
			page2TabbarList: [
				{
					text: "会员"
				},
				{
					text: "算力"
				}
			],
			goods1Ac: 0,
			goods1: [
				// {
				//   isTag: true,
				//   text: "视频月会员",
				//   price: "199",
				//   tips: "约6.63/天",
				//   isSelect: true
				// },
				// {
				//   isTag: false,
				//   text: "视频年会员",
				//   price: "1999",
				//   tips: "约6.63/天",
				//   isSelect: false
				// }
			],
			equityList: [
				// {
				// 	pic: tools.imgPath + "buy/equity4.svg",
				// 	text: "短视频合成时长",
				// 	tips: "25分钟"
				// },
			],
			chongzhiPayTypeAc: "wx",
			chongzhi_num_ac: null,
			chongzhi_num_list: [],
			chongzhi_data_confirm: {},
			chongzhi_data_submit: {}
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							if (payload.platform === "ios" || payload.system.includes("iOS")) {
								uni.setStorageSync("ContactUs", { type: "购买vip" });
								uni.redirectTo({
									url: "/pages/ContactUs/ContactUs"
								});
							}
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
						}
						resolve(payload);
					}
				});
			});
		},
		//跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 跳转协议页面
		toAgreement(url) {
			uni.setStorageSync("AgreementURL", url);
			this.toPage("/pages/Agreement/Agreement");
		},
		// 兑换码弹框确定
		async RedemptionCodeConfirm(val) {
			if (val === "") {
				tools.easyToast("请输入兑换码！");
				return;
			}
			this.RedemptionCodeVal = val;

			let res = await api.getExchangeVerificationCodenew({
				code: val
			});
			this.$refs.RedemptionCode.close();
		},
		//订单确认
		async getOrderConfirmApi({ productId, type }) {
			if (!this.isCheck) {
				return tools.easyToast("请先同意" + this.companyName + "服务协议！");
			}

			const apiField = {};
			switch (type) {
				case "vip":
					if (this.goods1[this.goods1Ac].price == 0) {
						tools.easyToast("您已拥有此权益，无需购买！~");
						return;
					}
					apiField.Confirm = "getVIPOrderConfirm";
					apiField.Submit = "postVIPOrderSubmit";
					apiField.Pay = "getVIPOrderPay";
					apiField.chongzhi_data_confirm = "memberDetailDto";
					apiField.price = "memberPrice";
					break;

				default:
					apiField.Confirm = "getOrderConfirm";
					apiField.Submit = "postOrderSubmit";
					apiField.Pay = "getOrderPay";
					apiField.chongzhi_data_confirm = "userProductDetailDto";
					apiField.price = "priceMoney";
					break;
			}
			uni.showLoading({
				title: "请稍等..."
			});
			let ConfirmRes = await api[apiField.Confirm](productId);
			if (!ConfirmRes) {
				uni.hideLoading();
				return false;
			}
			this.chongzhi_data_confirm = ConfirmRes.data;
			let SubmitRes = await api[apiField.Submit]({
				payPrice: this.chongzhi_data_confirm[apiField.chongzhi_data_confirm][apiField.price],
				orderToken: this.chongzhi_data_confirm.confirmToken,
				payType: this.chongzhiPayTypeAc,
				productId: productId
			});
			if (!SubmitRes) {
				uni.hideLoading();
				return false;
			}
			this.chongzhi_data_submit = SubmitRes.data;
			uni.hideLoading();
			this.pay({ type });
		},
		//支付
		async pay({ orderSn, type }) {
			const apiField = {};
			switch (type) {
				case "vip":
					apiField.Confirm = "getVIPOrderConfirm";
					apiField.Submit = "postVIPOrderSubmit";
					apiField.Pay = "getVIPOrderPay";
					break;

				default:
					apiField.Confirm = "getOrderConfirm";
					apiField.Submit = "postOrderSubmit";
					apiField.Pay = "getOrderPay";
					break;
			}
			const that = this;
			orderSn = orderSn || this.chongzhi_data_submit.orderSn;
			let res = null;
			// #ifdef MP-WEIXIN
			let code = await new Promise((next) => {
				wx.login({
					success(result) {
						if (result.code) {
							next(result.code);
						}
					}
				});
			});
			res = await buyApi.mpPay({ orderSn, code });
			if (!res) return;
			console.log(res);
			let { timeStamp, nonceStr, signType, paySign, appId } = res.data;
			console.log({ timeStamp, nonceStr, package: res.data.packageSn, signType, paySign, appId });
			wx.requestPayment({
				appId,
				timeStamp,
				nonceStr,
				package: res.data.packageSn,
				signType,
				paySign,
				success: function (resd) {
					wx.showToast({
						title: "支付成功",
						icon: "success",
						duration: 2000
					});
				},
				fail: function (resd) {
					let { errMsg } = resd;
					wx.showToast({
						title: errMsg == "requestPayment:fail cancel" ? "取消支付" : "支付失败",
						icon: "none",
						duration: 2000
					});
				},
				complete: function (e) {
					console.log("调用微信支付返回的结果：", e);
				}
			});
			// #endif
			// #ifdef H5
			let code = "";
			let h5Type = this.systemInfo.system.slice(0, this.systemInfo.system.indexOf(" "));
			res = await buyApi.h5Pay({
				orderSn,
				code,
				h5Type
			});
			if (!res) return;
			window.open(res.data);
			// #endif
			console.log(res);
		},
		//切换充值金币数量
		changeChongzhi_num_ac(item, index) {
			this.chongzhi_num_ac = item.id;
		},
		//切换Page2TabbarAc
		changePage2TabbarAc(item, index) {
			this.page2TabbarAc = index;
		},

		//切换商品Ac
		changeGoods1Ac({ itemm, index }) {
			this.goods1Ac = index;
			this.equityList = this.goods1[index].hashMapsList.map((e) => {
				let text, tips;
				for (let key in e) {
					text = key;
					tips = e[key];
				}
				return {
					pic: tools.imgPath + "buy/equity4.svg",
					text,
					tips
				};
			});
		},
		//获取会员商品
		getPriceAllApi() {
			api.getPriceAll().then((res) => {
				if (!res) return;
				let str = ["月会员", "年会员", "月会员", "年会员"];
				let sub = ["限时活动，畅享数字人视频创作", "包年最划算，畅享数字人视频创作", "畅享双系统，支持数字人直播和视频创作", "包年最划算，支持数字人直播和视频创作"];
				let time = ["20分钟", "300分钟", "120分钟", "720分钟"];
				let box = [
					[{ 训练视频: "支持上传30秒" }, { 清晰度: "720P" }],
					[{ 训练视频: "支持上传1分钟" }, { 清晰度: "1080P" }],
					[{ 训练视频: "支持上传1到2分钟" }, { 清晰度: "1080P" }]
				];
				// "1732417190498283522"是首页广告区的id,这里后端没有区分，前端暂时过滤。
				this.buyVipDataList1 = res.data
					.filter((e) => !["1732417190498283522"].includes(e.id))
					.map((e, i) => {
						e.hashMapsList = [...e.hashMapsList, { AI爆款文案: "无限次" }, { 专属素材: "数字人、配音" }];
						e.hashMapsList = e.hashMapsList
							.map((item, index) => {
								switch (Object.keys(item)[0]) {
									case "AI绘画次数":
										item[Object.keys(item)[0]] = "即将开放";
										break;
									case "AI文案生成次数":
										item[Object.keys(item)[0]] = "100次";
										if (e.memberName == "视频年会员") {
											item[Object.keys(item)[0]] = "无限次数";
										}
										break;
									case "AI成片次数":
										item[Object.keys(item)[0]] = "即将开放";
										break;
									case "AI视频翻译次数":
										item[Object.keys(item)[0]] = "即将开放";
										break;
								}
								return item;
							})
							.filter((e) => {
								let key = Object.keys(e)[0];
								let val = Object.values(e)[0];
								return val != "即将开放" && key != "数字名片";
							});
						// let obj = [...e.hashMapsList].reduce((p,e,i,s)=>{
						//     return p[i] = e;
						// },{});
						// obj['AI绘画次数'] = '即将开放';
						// obj['AI文案生成次数'] = '即将开放';
						// obj['AI成片次数'] = '即将开放';
						// obj['AI视频翻译次数'] = '即将开放';
						// console.log({obj});
						return {
							...e,
							// name: e.memberName,
							name: str[i],
							nameSub: sub[i],
							time: time[i],
							price: e.memberPrice,
							texts: [
								{ text1: "会员VIP数字人", text2: "" },
								{ text1: "360分钟  视频制作时长/年", text2: "（有效期365天）" },
								{ text1: "会员VIP声音", text2: "" },
								{ text1: "600分钟  视频制作时长/年", text2: "（长期有效）" }
							]
						};
					});
				this.buyVipDataList1Ac = this.buyVipDataList1[0].id;
				let [e1, e2, e3] = this.buyVipDataList1.slice(-3);
				console.log("获取会员商品", this.buyVipDataList1);
				this.goods1 = [e3, e1, e2].map((e, i) => {
					let hashMapsList = {};
					e.hashMapsList.map((e) => {
						hashMapsList[Object.keys(e)[0]] = Object.values(e)[0];
					});
					return {
						...e,
						text: e.memberName,
						isTag: i === 2,
						isTag2: i === 0,
						isTag3: i === 1,
						price: e.price,
						oldprice: i === 0 ? 0 : 0,
						tips: hashMapsList["AI视频合成时长"] + "钟",
						hashMapsList: [...(i == 2 ? [{ 极速拍克隆: "无限次" }] : []), ...e.hashMapsList, ...box[i]]
					};
				});

				this.changeGoods1Ac({
					item: this.goods1[0],
					index: 0
				});
			});
		},
		//获取商品
		async getCommodityAllApi() {
			let getVirtualcoinrationData = await this.getVirtualcoinrationAllApi();
			if (!getVirtualcoinrationData) return;
			api.getCommodityAll().then((res) => {
				console.log(res);
				if (!res) {
					res = {};
					res.data = [];
				}
				this.chongzhi_num_list = res.data.map((e) => {
					return {
						...e,
						price: e.priceMoney,
						text: e.number,
						tips: `约${(((e.number / getVirtualcoinrationData[0].proportionSource / getVirtualcoinrationData[0].proportionTarget) * 1000) / 60).toFixed(1)}分钟视频`
					};
				});
				this.chongzhi_num_ac = this.chongzhi_num_list[0].id;
			});
		},
		// 秒转`${m}分钟${s}秒`
		seconds2Time(seconds) {
			let s = Math.floor(seconds % 60);
			let m = Math.floor(seconds / 60);
			return `${m ? m + "分钟" : ""}${+s ? s + "秒" : ""}`;
		},
		//获取数据
		async getData() {
			await this.getCommodityAllApi();
			this.getHomeDetailInfoApi();
			this.getPriceAllApi();
		},
		//获取所有 权益：金币 比例
		getVirtualcoinrationAllApi() {
			return api.getVirtualcoinrationAll().then((res) => {
				if (!res) return;
				// console.log('获取所有 权益：金币 比例', res);
				let goldNum = this.myPage_sub1_top1.list[0].num;
				this.getVirtualcoinrationData = res.data;
				// console.log(goldNum, res.data[0].proportionSource, res.data[0].proportionTarget);
				this.myPage_sub1_top1.list[4].num = (((goldNum / res.data[0].proportionSource / res.data[0].proportionTarget) * 1000) / 60).toFixed(2);
				this.myPage_sub1_top1.list[5].num = (((goldNum / res.data[1].proportionSource / res.data[1].proportionTarget) * 1000) / 60).toFixed(2);
				this.myPage_sub1_top1.list[6].num = Math.floor(goldNum / res.data[4].proportionSource / res.data[4].proportionTarget);
				this.myPage_sub1_top1.list[7].num = Math.floor(goldNum / res.data[6].proportionSource / res.data[6].proportionTarget);
				this.myPage_sub1_top1.list[8].num = Math.floor(goldNum / res.data[2].proportionSource / res.data[2].proportionTarget);
				this.myPage_sub1_top1.list[9].num = Math.floor(goldNum / res.data[3].proportionSource / res.data[3].proportionTarget);
				this.myPage_sub1_top1.list[10].num = Math.floor(goldNum / res.data[7].proportionSource / res.data[7].proportionTarget);

				this.myPage_sub1_top1.list[4].unit = `分钟`;
				this.myPage_sub1_top1.list[5].unit = `分钟`;
				this.myPage_sub1_top1.list[6].unit = `次`;
				this.myPage_sub1_top1.list[7].unit = `次`;
				this.myPage_sub1_top1.list[8].unit = `次`;
				this.myPage_sub1_top1.list[9].unit = `次`;
				this.myPage_sub1_top1.list[10].unit = `次`;
				return res.data;
			});
		},
		//终端个人详情页
		getHomeDetailInfoApi() {
			api.getHomeDetailInfo().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				// this.userInfo = { ...this.userInfo, ...res.data };
				this.inviteLink = res.data.inviteUrl;
				this.rightList = res.data.rightList;
				this.myPage_sub3.duanshipinInfo.youxiaoqi = res.data.totalMember[0]?.finalTime || "";
				this.myPage_sub3.twoDhuiyuanInfo.youxiaoqi = res.data.totalMember[1]?.finalTime || "";
				// this.myPage_sub3.duanshipinInfo.dataList1[0].num = (+res.data.rightList[0].totalProject);
				this.myPage_sub3.duanshipinInfo.dataList1[1].num = +res.data /* .rightList[0] */.videoValidCount;
				// 下标
				let duanshipinIndex = this.rightList.findIndex((e) => e.id == "1");
				let zhiboIndex = this.rightList.findIndex((e) => e.id == "1710556060574937089");
				let xingxiangkelongbiaoIndex = this.rightList.findIndex((e) => e.id == "1728692276125716481");
				let shengyinkelongbiaoIndex = this.rightList.findIndex((e) => e.id == "1728692348020281345");
				let AIhuihuaIndex = this.rightList.findIndex((e) => e.id == "1728692387216052226");
				let AIchengpianIndex = this.rightList.findIndex((e) => e.id == "1728692708826894338");
				let shipinfanyiIndex = this.rightList.findIndex((e) => e.id == "1728692760009986050");
				let wenanshengchengIndex = this.rightList.findIndex((e) => e.id == "1728692821095829506");
				let AIbianshengIndex = this.rightList.findIndex((e) => e.id == "1728693101979979777");
				let shuzimingpianIndex = this.rightList.findIndex((e) => e.id == "1732390268477263873");
				let xingxiangkelongIndex = this.rightList.findIndex((e) => e.id == "1735586161909239809");
				let shengyinkelongIndex = this.rightList.findIndex((e) => e.id == "1735586256058781698");
				let jinbiIndex = this.rightList.findIndex((e) => e.id == "1741564651566090455");
				this.myPage_sub3.duanshipinInfo.dataList1[0].num = this.seconds2Time(res.data.rightList[duanshipinIndex].totalRightBalance / 1000) || 0;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[1].num = +res.data.rightList[zhiboIndex].totalProject;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[0].num = this.seconds2Time(res.data.rightList[zhiboIndex].totalRightBalance / 1000) || 0;
				this.myPage_sub1_top1.list[0].num = res.data.rightList[jinbiIndex].totalRightBalance;
				this.myPage_sub1_top1.list[0].tips = `约${(((this.myPage_sub1_top1.list[0].num / this.getVirtualcoinrationData[0].proportionSource / this.getVirtualcoinrationData[0].proportionTarget) * 1000) / 60).toFixed(1)}分钟视频`;
				this.myPage_sub1_top1.list[1].num = this.seconds2Time(res.data.rightList[zhiboIndex].totalRightBalance) || 0;

				this.myPage_sub3.duanshipinInfo.dataList1[0].title = res.data.rightList[duanshipinIndex].rightsName;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[0].title = res.data.rightList[zhiboIndex].rightsName;
				this.myPage_sub3.b_dataList[0].text = res.data.rightList[2].rightsName;
				this.myPage_sub3.b_dataList[1].text = res.data.rightList[3].rightsName;
				this.myPage_sub3.b_dataList[2].text = res.data.rightList[8].rightsName;
				this.myPage_sub3.b_dataList[3].text = res.data.rightList[9].rightsName;
				this.myPage_sub3.b_dataList[4].text = res.data.rightList[4].rightsName;
				this.myPage_sub3.b_dataList[5].text = res.data.rightList[5].rightsName;
				this.myPage_sub3.b_dataList[6].text = res.data.rightList[6].rightsName;
				this.myPage_sub3.b_dataList[7].text = res.data.rightList[7].rightsName;

				this.myPage_sub3.b_dataList[0].num = res.data.rightList[2].totalRightBalance;
				this.myPage_sub3.b_dataList[1].num = res.data.rightList[3].totalRightBalance;
				this.myPage_sub3.b_dataList[2].num = res.data.rightList[8].totalRightBalance;
				this.myPage_sub3.b_dataList[3].num = res.data.rightList[9].totalRightBalance;
				this.myPage_sub3.b_dataList[4].num = "未开放";
				this.myPage_sub3.b_dataList[5].num = "未开放";
				this.myPage_sub3.b_dataList[6].num = "未开放";
				this.myPage_sub3.b_dataList[7].num = "未开放";
				this.getVirtualcoinrationAllApi();
			});
			api.getUserinternalstorage().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				this.myPage_sub3.duanshipinInfo.dataList1[2].num = `${(res.data.totalStorage - res.data.useStorage).toFixed(2)}${res.data.unit || "GB"}`;
			});
		}
	},
	created() {
		this.initSystemInfo();
		this.getData();
	}
};
</script>

<style lang="scss">
.buy-page {
	width: 100vw;
	box-sizing: border-box;
	padding: 0vw 3vw;

	.tabbar-box {
		background: none;

		.tabbar {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 0vw;
			margin-bottom: 6vw;
			background: #fff;
			height: 10vw;
			padding: 2vw;

			.tabbar-item {
				background: none;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 36rpx;
				color: rgba(52, 54, 51, 1);
				margin-right: 6vw;

				&:last-child {
					margin-right: 0vw;
				}

				&.ac {
					background: none;
					font-size: 36rpx;
					font-weight: 700;
				}
			}
		}
	}

	.buy-box {
		margin-top: 6vw;
		.tips11 {
			box-sizing: border-box;
			padding-right: 3vw;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.icon {
				.img {
					width: 4vw;
					height: 4vw;
					display: block;
				}
			}
			.text {
				font-size: 4vw;
				text-align: right;
				color: #4238a6;
			}
		}
		.buy-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 3vw;
			background: rgba(17, 17, 19, 1);
			font-size: 36rpx;
			color: rgba(250, 170, 90, 1);
			color: #fff;
			padding: 4vw 0vw;
			margin: 3vw auto 2vw;
		}

		.f {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 2vw;
			padding-bottom: 5vw;
			.check {
				width: 5vw;
				margin-right: 1vw;
				.icon {
					width: 100%;
					display: block;
				}
			}
			.text {
				font-size: 3vw;
				color: rgba(166, 166, 166, 1);
			}

			.text2 {
				font-size: 3vw;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.vip-box {
		.tabbar {
			margin: 3vw 0vw;
			display: -webkit-box;

			.item {
				box-sizing: border-box;
				padding: 2vw 3vw;
				border-radius: 100vw;
				background: rgba(229, 229, 229, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 15rpx;
				color: rgba(166, 166, 166, 1);
				margin-right: 3vw;

				&.ac {
					background: rgba(17, 17, 19, 1);
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		.goods {
			// padding: 3vw;

			.list {
				margin-bottom: 2vw;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.item {
				width: 28vw;
				height: 36vw;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 3vw;
				background: rgba(255, 255, 255, 0.2);
				border: 1px solid rgba(255, 199, 143, 1);
				overflow: hidden;
				border: 1px solid #00000033;
				&.ac {
					background: rgba(255, 234, 201, 1);
					border: 1px solid rgba(255, 159, 63, 1);
					background: transparent;
					border: 2px solid #0f0f0f;
					.tag {
						background: linear-gradient(135.67deg, #fc4558 0%, #fe7a7d 100%);
					}
					.price {
						color: #0f0f0f;
					}
					.tips {
						&.style1 {
							background: #dcf2ff;
						}
					}
				}

				.text {
					margin-top: 3vw;
					font-size: 3vw;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}

				.price {
					font-size: 5.2vw;
					font-weight: 600;
					color: rgba(255, 33, 33, 1);
					color: #0f0f0faa;
				}
				.price-old {
					text-decoration: line-through;
					font-size: 3vw;
					font-weight: 600;
					color: #000;
				}
				.tips {
					margin-top: 2vw;
					font-size: 3.2vw;
					font-weight: 400;
					line-height: 28rpx;
					color: #464545;
					&.style1 {
						padding: 1vw 2vw;
						border-radius: 100vw;
						background: linear-gradient(135.67deg, rgba(255, 233, 166, 1) 0%, rgba(255, 140, 0, 1) 100%);
						background: #e5e6e8aa;
					}
				}

				.tag {
					position: absolute;
					left: 0vw;
					top: 0vw;
					box-sizing: border-box;
					padding: 1.2vw 3vw;
					font-size: 3.5vw;
					font-weight: 700;
					color: #a24900;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 1vw 0vw 4vw 0vw;
					// background: linear-gradient(135.67deg, rgba(255, 233, 166, 1) 0%, rgba(255, 140, 0, 1) 100%);
					background: #fe7a7dcc;
				}

				.select {
					width: 30%;
					height: 27%;
					position: absolute;
					bottom: 0vw;
					right: 0vw;
					display: block;
				}
			}
		}

		.equity {
			margin-top: 6vw;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				margin-bottom: 6vw;
				line-height: 40rpx;
				color: rgba(18, 18, 18, 1);
			}

			.biaoge {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-auto-rows: 40vw;
				gap: 2vw;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 6vw;

					.pic {
						width: 15vw;
						height: 10vw;
						display: block;
					}

					.text {
						font-size: 3.6vw;
						font-weight: 400;
						line-height: 50rpx;
						color: rgba(51, 51, 51, 1);
					}

					.tips {
						font-size: 3.6vw;
						font-weight: 400;
						line-height: 30rpx;
						color: #464545;
					}
				}
			}
		}
	}

	.gold-box {
		.t {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.money {
				width: 20vw;
				height: 20vw;
				display: block;
			}

			.text {
				font-size: 12px;
				font-weight: 400;
				line-height: 32rpx;
				color: rgba(166, 166, 166, 1);
			}

			.num {
				font-size: 60rpx;
				font-weight: 700;
				line-height: 116rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.b {
			.title {
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(18, 18, 18, 1);
			}

			.tips {
				margin: 3vw 0vw 4vw;
				font-size: 20rpx;
				line-height: 28px;
				color: rgba(166, 166, 166, 1);
			}

			.list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					box-sizing: border-box;
					padding: 3vw 2vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 49%;
					margin-bottom: 3vw;
					opacity: 1;
					border-radius: 3vw;
					background: rgba(255, 255, 255, 1);
					border: 1px solid rgba(232, 232, 232, 1);

					.item-t {
						display: flex;
						justify-content: start;
						align-items: center;

						.t-l {
							font-size: 60rpx;
							font-weight: 700;
							color: rgba(51, 51, 51, 1);
							margin-right: 2vw;
						}

						.money {
							width: 6vw;
							height: 6vw;
							display: block;
						}
					}

					.item-b {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.t-l {
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
						}

						.t-r {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(255, 33, 33, 1);
						}
					}

					&.ac {
						background: linear-gradient(135.67deg, rgba(255, 233, 166, 1) 0%, rgba(255, 140, 0, 0.77) 100%);
						border: 1px solid rgba(255, 140, 0, 1);

						.item-t {
							.t-l {
								color: rgba(162, 73, 0, 1);
							}
						}
					}
				}
			}
		}
	}
}
</style>
